<template>
    <Navbar />
    <div class="container">
      <div class="model-info">
        <h1>{{ fishDetails.name }}</h1>
      </div>
      <div class="canvas-container" ref="canvasContainer">
        <div id="pro"></div>
      </div>
  </div>
</template>

<script setup>
import Navbar from "../../components/Navbar.vue";
  import { ref, onMounted } from 'vue';
  import request from '../../api/request'

  // import axios from 'axios';
  import { useRoute } from 'vue-router';
  import * as three from 'three';
  import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
  import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';


  const route = useRoute();
  const fishDetails = ref({});
  const modelPath = ref('');

  const fetchFishDetails = async () => {
    const fishId = route.params.id;
    try {
      const response = await request.get(
        `fish_details_api?id=${fishId}`
      );
      console.log(response.data.data);
      modelPath.value = response.data.data.glb;
      fishDetails.value = response.data.data;
    } catch (error) {
      console.error(error);
    }
  };

  onMounted(async () => {
    await fetchFishDetails();

    const canvas = document.createElement('canvas');
    const renderer = new three.WebGLRenderer({ canvas });
    renderer.setClearColor(0xd3df56,0.5);

    const camera = new three.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.position.z = 5;

  // 更新相机宽高比
  const resizeRendererToDisplaySize = () => {
    const width = window.innerWidth * 0.7;
    const height = window.innerHeight-100;
    renderer.setSize(width, height);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
  };

  // 更新尺寸
  window.addEventListener('resize', resizeRendererToDisplaySize);
  resizeRendererToDisplaySize();

    const scene = new three.Scene();
    
    //添加灯光
    var ambient = new three.AmbientLight(0x888888);
    scene.add(ambient);
    const light = new three.PointLight( 0xFFFFFF, 3, 100 );
    light.position.set( 3, 3, 3 );
    scene.add( light );

    const light01 = new three.PointLight( 0xFFFFFF, 3, 100 );
    light01.position.set( -3, -3, -3 );
    scene.add( light01 );
    
        const light03 = new three.PointLight( 0xFFFFFF, 3, 100 );
    light03.position.set( -1, -1, 1);
    scene.add( light03 );

        const light04 = new three.PointLight( 0xFFFFFF, 3, 100 );
    light04.position.set( 1, 1, -1);
    scene.add( light04 );

    const loader = new GLTFLoader();
    loader.load(
      modelPath.value,
      (gltf) => {
        const root = gltf.scene;
        scene.add(root);
      },
      (xhr) => {
        console.log((xhr.loaded / xhr.total) * 100 + '% loaded');
        document.getElementById("pro").innerHTML=(xhr.loaded / xhr.total * 100) + '% loaded';
        if( xhr.loaded / xhr.total == 1){
            setTimeout("document.getElementById('pro').innerHTML= ''",2000)
            //document.getElementById("pro").innerHTML= "hello";
        }
      },
      (error) => {
        console.error(error);
      }
    );

    const controls = new OrbitControls(camera, renderer.domElement);
    controls.update();

    const animate = () => {
      requestAnimationFrame(animate);

      controls.update();

      renderer.render(scene, camera);
    };

    animate();

    const canvasContainer = document.querySelector('.canvas-container');
    if (canvasContainer) {
      canvasContainer.appendChild(canvas);
    }
  });
</script>

<style scoped>
.container {
  margin-top: 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 100%;
}

.model-info {
  flex: 1;
  padding: 0 20px;
}

.canvas-container {
  flex: 3;
  width: 70%;
  height: 100%;
  position: relative;
}
#pro {
  position: absolute;
  top: 50%;
  right: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  /* padding: 5px; */
  /* border-radius: 5px; */
  z-index: 1;
}

</style>